@import '../../mixins'

.Snapshots
  box(relative, flex)
  size(100%, 100%)
  flex-flow: column
  align-items: stretch
  overflow: hidden
  background-color: var(--bg)

.Snapshots .ctrls
  box(relative, flex)
  size(h: 64px)
  flex-flow: wrap
  justify-content: center
  align-items: center
  grid-gap: 12px
  padding: 0 16px
  background-color: var(--bg)
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  &:before
    content: ''
    box(absolute)
    pos(b: 0, l: 0)
    size(100%, 1px)
    background-color: var(--border-fg)
  &[data-empty]
    size(h: 100%)
    &:after
      content: '...'
      box(absolute)
      pos(50%, same)
      text(s: rem(28))
      color: var(--inactive-fg)
      transform: translate(-50%, -50%)

.Snapshots .ctrls > .title
  box(relative)
  text(s: rem(24))
  color: var(--title-fg)
  flex: 1 1

.Snapshots .wrapper
  box(flex)
  size(100%, same)

// ---
// -- Timeline
// -
.Snapshots .timeline
  size(h: 100%)
  flex: 1 0 auto
  z-index: 1
  overflow: hidden
  box-shadow: 0 0 0 1px #00000016, 0 0 8px 0 #00000032

.Snapshots .timeline .ctrls
  padding: 0
  align-items: flex-start

.Snapshots .timeline .btn
  box(flex)
  size(100%, calc(100% - 1px))
  text(s: rem(18))
  justify-content: center
  align-items: center
  border-radius: 0
  padding: 0

.Snapshots .cards
  box(relative)
  size(100%, calc(100% - 64px))
  flex: 1 0 auto
  overflow-y: auto
  overflow-x: hidden
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  &[data-empty]:after
    content: '...'
    box(absolute)
    pos(50%, same)
    text(s: rem(28))
    color: var(--inactive-fg)
    transform: translate(-50%, -50%)


.Snapshots .snapshot-card
  box(relative, flex)
  size(min-w: max-content)
  flex-flow: column
  padding: 12px 8px
  cursor: default
  &:hover
    background-color: #00000016

  &[data-active]
    background-color: #00000032
  
  &[data-type="layer"]
    flex-flow: row
    justify-content: space-between
    padding: 4px 8px

  &[data-type="base"]:before
    content: ''
    box(absolute)
    pos(b: 0, l: 0)
    size(100%, 1px)
    background-color: var(--border-fg)
    box-shadow: 0 1px 0 0 var(--border-flare-fg)

.Snapshots .snapshot-card .date-time
  box(relative)
  text(s: rem(15))
  color: var(--title-fg)
  padding: 0 0 2px

.Snapshots .snapshot-card[data-type="layer"] .date-time
    text(s: rem(12))
    color: var(--info-fg)

.Snapshots .snapshot-card .info
  box(relative)
  text(s: rem(12))
  color: var(--info-fg)

.Snapshots .snapshot-card[data-type="layer"] .info
    text(s: rem(12))
    color: var(--label-fg)

.Snapshots .snapshot-card .window
  box(relative)
  white-space: nowrap
  margin: 0 auto 0 0

.Snapshots .snapshot-card .tabs-count
.Snapshots .snapshot-card .ctx-tabs-count
  box(relative)
  text(s: rem(12))
  margin: 0 0 0 8px

.Snapshots .snapshot-card .tabs-count
  color: var(--info-fg)

.Snapshots .snapshot-card .ctx-tabs-count
  color: var(--container-fg, var(--info-fg))

// ---
// -- Snapshot
// -
.Snapshots .snapshot
  box(flex)
  size(70%, 100%)
  flex-flow: column

.Snapshots .snapshot-content
  box(relative, flex)
  flex: 1
  flex-flow: column
  align-items: center
  overflow-y: auto
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, 1px)
    background-color: var(--border-flare-fg)

.Snapshots .snapshot-content > h2
  box(relative)
  size(100%)
  text(s: rem(32), w: 700)
  color: var(--title-fg)
  text-align: center
  margin: 16px 0 8px

.Snapshots .containers
  box(relative, flex)
  size(calc(100% - 32px), max-w: 580px)
  padding: 0 16px
  flex-flow: column
  align-items: center
  grid-gap: 8px 0

.Snapshots .container
  box(relative, flex)
  size(100%)
  align-items: center

.Snapshots .container-icon
  box(relative)
  size(16px, same)
  > img
  > svg
    box(absolute)
    size(100%, same)
    fill: var(--container-fg)

.Snapshots .container-name
  box(relative)
  text(s: rem(18))
  color: var(--label-fg)
  margin: 0 8px

.Snapshots .container-ctrls
  box(relative, flex)
  grid-gap: 0 8px
  margin-left: auto

.Snapshots .windows
  box(relative, flex)
  size(calc(100% - 32px), max-w: 580px)
  padding: 0 16px
  flex: 1
  flex-flow: column
  grid-gap: 16px 0

.Snapshots .window
  size(100%)
  &:last-of-type
    padding-bottom: 32px

.Snapshots .name
  text(s: rem(24))
  padding: 8px 0
  margin-right: auto
  text-align: center
  color: var(--label-fg)

.Snapshots .win-ctrls
  box(relative, flex)
  justify-content: center
  align-items: center

.Snapshots .text-btn
  box(relative)
  text(s: rem(14))
  color: var(--active-fg)
  cursor: pointer
  padding: 2px 8px
  &:hover
    opaicty: .7
  &:active
    opaicty: .5

.Snapshots .panels
  box(flex)
  flex-flow: column

.Snapshots .panel
  box(relative, flex)
  flex-flow: column
  padding: 3px 8px

.Snapshots .panel-info
  box(relative, flex)
  size(h: 32px)
  align-items: center
  margin-top: 2px

.Snapshots .panel-icon
  box(relative)
  size(16px, same)
  > img
  > svg
    box(absolute)
    size(100%, same)
    fill: var(--container-fg)

.Snapshots .panel-name
  box(relative)
  text(s: rem(18))
  color: var(--label-fg)
  margin: 0 8px

.Snapshots .tabs
  box(flex)
  flex-flow: column

.Snapshots .tabs > .placeholder
  box(relative)
  size(100%, 30px)
  transform: translateZ(0)
  &:before
    content: ''
    box(absolute)
    size(4px, same)
    pos(calc(50% - 2px), 8px)
    border-radius: 50%
    background-color: var(--inactive-fg)
    box-shadow: 8px 0 0 0 var(--inactive-fg), 16px 0 0 0 var(--inactive-fg)

.Snapshots .tab
  box(relative, flex)
  flex-flow: column
  justify-content: center
  padding: 3px 8px
  cursor: default
  outline: none
  border: none
  &:hover
    background-color: #00000016

.Snapshots .tab[data-target]:before
  content: ''
  box(absolute)
  pos(0, 0)
  size(2px, 100%)
  background-color: var(--active-fg)

for i in 1..12
  .Snapshots .tab[data-lvl=\"{i}\"]
    margin-left: (10px * i)

.Snapshots .tab > .icon
  box(absolute, flex)
  size(16px, same)
  pos(calc(50% - 8px), 8px)
  justify-content: center
  align-items: center
  transform: translateZ(0)
  > .hm
    box(relative)
    text(s: 14px, w: 700)
    color: var(--inactive-fg)
  > svg.ctr
    box(absolute)
    size(100%, same)
    fill: var(--container-fg)
  > svg.pin
    box(absolute)
    pos(b: -3px, r: -3px)
    size(11px, same)
    fill: var(--label-fg)

.Snapshots .tab[data-pinned] svg.ctr
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 7px,
    #000000 8px,
    #000000
  )

.Snapshots .tab > .title
.Snapshots .tab > .url
  box(relative)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  margin-left: 24px
  text-decoration: none
  outline: none
  border: none

.Snapshots .tab > .title
  text(s: rem(12))
  color: var(--label-fg)

.Snapshots .tab > .url
  text(s: rem(11))
  color: var(--info-fg)